<template>
  <div id="app">
    <Head style="background-color: #FFFFFF">提现</Head>
     <div class="top">
       <div class="top_imgs"><img class="top_img" src="../../../assets/images/weixin.png" alt=""></div>
       <div class="top_tit">提现至微信</div>
       <div v-if="bind == 0" class="top_weixin" @click="bindings">立即绑定</div>
     </div>
     <div class="content">
        <div class="content_moeny">
          ￥<input v-model="money" class="content_input"  type="text">
        </div>
        <div class="content_tis">
          <div class="content_price">可提现余额￥{{price}}</div>
          <div class="content_rule" @click="withdrawalRules">
              提现规则
          </div>
          <div class="content_img"><img style="width:13px;height:13px;" src="../../../assets/images/bangzu.png" alt=""></div>
        </div>
     </div>
    <div class="button" v-if="is_withdrawal" @click="withdrawal" >立即提现</div>
    <div class="buttons" v-else>满￥{{min_money}}即可提现</div>
    <van-dialog v-model="dialogVisible" title="系统提示" :show-cancel-button="false" :show-confirm-button="true"
                @confirm="handleImCheckBind">
      <div class="bind-weixin-box">
        <div class="title-1">您当前未绑定微信，绑定后可发起提现</div>
        <div class="img">
          <img :src="weixin_image" alt="">
        </div>
        <div class="title-2">使用微信扫一扫，按提示快速绑定</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import { Dialog } from 'vant'
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  name: "Withdrawal",
  data () {
    return {
      'is_withdrawal':false,
      'price':0,
      'bind':0,
      'money':'',
      'tips':'',
      'min_money':0,
      'dialogVisible':false,
      'weixin_image':'',
      'amount_limit':1
    }
  },
  watch:{
    money(val){
      if(this.amount_limit == 1){
        if((val*1) >= (this.min_money * 1)){
          this.is_withdrawal = true
        } else {
          this.is_withdrawal = false

        }
      }
    }
  },
  created(){
    this.initInfo()
    console.log(this.$route)
  },
  methods: {
    initInfo () {
      http.get(api.envelopes, {})
        .then(res => {
          if(res.data.is_blacklist == 1){
            Dialog.alert({
              message: '您的账号异常，暂时无法发起提现。如需帮助请联系官方客服。',
            }).then(() => {
              this.$router.push('/member/RedEnvelopes/envelopes')
            });
          }
          this.price = res.data.money
          this.bind = res.data.bind
          this.tips = res.data.tips
          this.min_money = res.data.amount_setting
          if(res.data.amount_limit == 0){
            this.is_withdrawal = true
          }
          this.amount_limit = res.data.amount_limit
          if(res.data.amount_limit == 1){
            this.is_withdrawal = false
          }
        })
        .catch(() => {})
    },
    handleImCheckBind() {
      this.$router.go(0)
    },
    bindings(){
      this.dialogVisible= true
      http.get(api.get_qrcode,{type:'bind_weixin'}).then(res=>{
        this.weixin_image = res.data
      })
    },
    withdrawal(){
      let params = {
        'money':this.money
      }
      http
        .get(api.withdrawal, params)
        .then(item=>{
            if(item.code == 200 && item.message=="请先完成企业认证"){
              Dialog.confirm({
                message: '提现需完成企业认证',
                confirmButtonText:'立即认证',
                cancelButtonText	:'取消',
              }).then(() => {
                this.$router.push('/member/company/auth')
              }).catch(() => {
              });
            } else if (item.code == 200 ) {
            Dialog.confirm({
              message: '您的提现申请已提交，审核通过后会及时为您打款。可在提现记录页查看！',
              confirmButtonText:'提现记录',
              cancelButtonText	:'我知道了',
            }).then(() => {
              this.$router.push('/member/RedEnvelopes/envelopes?type=1')
              })
              .catch(() => {

              });
          }
        }).catch(item => {
            this.$notify(item.message)
        })
    },
    withdrawalRules(){
      Dialog.alert({
        title: '提现规则',
        messageAlign:'left',
        message: this.tips,
      }).then(() => {
        // on close
      });
    }
  }
}
</script>

<style scoped>
   #app{
     background-color: #F7F7F7;
     height:100vh;
   }
   .top{
     border-radius: 4px;
     width:90%;
     background-color: #FFFFFF;
     height: 45px;
     font-size:14px;
     margin-top:13px;
     margin-left:19px;
     margin-bottom:12px;
     font-family: PingFang SC;
     font-weight: 500;
     color: #282828;
   }
   .top_img{
     width:20px;
     height:20px;
     margin:12px 8px 12px 12px;
   }
   .top_imgs{
     float: left;
   }
   .top_weixin{
     width: 83px;
     height: 25px;
     border: 1px solid #FF7A21;
     background: #FFFFFF;
     border-radius: 25px;
     text-align: center;
     line-height:25px;
     float:right;
     margin :10px 11px 10px 0px;
     font-size: 12px;
     font-weight: 500;
     color: #FF7A21;
   }
   .top_tit{
     margin-top:13px;
     float: left;
   }
   .content{
     border-radius: 4px;
     width:90%;
     margin-left:19px;
     background-color: #FFFFFF;
     padding-left: 14px;
     padding-right: 14px;
   }
   .content_moeny{
     font-size:30px;
     padding-top: 30px;
     width:100%;
     font-weight: bold;
     color: #3A3A3A;
     border-bottom: 1px solid #F0F0F0;
   }
   .content_input{
     border-style: none;
     margin-bottom: 30px;
     width:90%;
   }
   .content_tis{
     color: #999999;
     font-size:13px;
     height:41px;
     margin:14px 0px;
   }
   .content_price{
     float:left;
   }
   .content_img{
     margin:2px 2px;
     float:right;
   }
   .content_rule{
     color:#FE8434;
     float:right;
   }
   .button{
     width: 77%;
     text-align: center;
     background: linear-gradient(-18deg, #FF7A21, #F39A5E);
     border-radius: 40px;
     margin-top:38px;
     margin-left: 40px;
     height: 40px;
     line-height: 40px;
     font-size: 15px;
     color: #FFFFFF;

   }
   .buttons{
     width: 77%;
     text-align: center;
     background-color: #DDD8D5;
     border-radius: 40px;
     margin-top:38px;
     margin-left: 40px;
     height: 40px;
     line-height: 40px;
     font-size: 15px;
     color: #FFFFFF;

   }
   .bind-weixin-box {
     display: flex;
     flex-direction: column;
     text-align: center;
     padding: 10px 0;
   }
   .title-1 {
     color: #646566;
     font-size: 14px;
   }

   .img {
     width: 111px;
     height: 111px;
     margin: 13px auto 10px;
   }
   img {
     width: 100%;
     height: 100%;
   }

   .title-2 {
     color: #999999;
     font-size: 13px;
   }
</style>
